<template>
  <!-- 
  watch可以侦听到data/computed属性值的改变
  基本用法:
  watch:{
    "被侦听的属性名"(newVal,oldVal){
      // newVal(现在的值) 和 oldVal(上一刻的值)自动被触发  
    } 
  }

  深度侦听:
  watch:{
    "要侦听的属性名":{ 
      immediate:true,    是否立即执行
      deep:true,         深度侦听复杂类型变化
      handler(newVal , oldVal){ }
    }
  }
  -->

  <div>
    name:<input type="text" v-model="user.name" />
    <hr>
    age:<input type="text" v-model="user.age" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        age: 0
      }
    }
  },
  // 侦听器 侦听name的变化
  watch: {
    // 监听的是对象 要加上deep:true 意思是深度侦听
    user: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal) // 打印的是 user里的对象
      },
      deep: true, //深度侦听
      immediate: true //立即侦听 网页打开就开始侦听
    }
  }
}
</script>

<style>
</style>